<template>
  <header class="header fixed z-999 top-0 left-0 right-0 flex items-center justify-between box-border">
    <Logo class="logo" />
    <div class="menu-container flex flex-1 items-center justify-between">
      <el-menu
          v-if="!isMobile || isMenuOpen"
          mode="horizontal"
          :ellipsis="false"
          text-color="#3d3d3d"
          background-color="transparent"
          active-text-color="#3d3d3d"
          popper-class="nav-menu-popper"
          :default-active="activeMenu"
          router
          class="menu"
          :class="{ 'menu-open': isMenuOpen }"
      >
        <template v-for="item in menuList">
          <el-menu-item
              v-if="!item.children.length"
              :key="item.path"
              :index="item.path"
          >{{ item.label }}</el-menu-item>
          <el-sub-menu v-else :index="item.path" :key="`${item.path}/sub`">
            <template #title>{{ item.label }}</template>
            <el-menu-item
                v-for="sub in item.children"
                :key="sub.path"
                :index="`${item.path}${sub.path}`"
            >{{ sub.label }}</el-menu-item>
          </el-sub-menu>
        </template>
      </el-menu>

      <div class="user-container flex items-center">
        <User class="user" />
        <button class="hamburger" v-if="isMobile" @click="toggleMenu">
          <span class="line"></span>
          <span class="line"></span>
          <span class="line"></span>
        </button>
      </div>
    </div>
  </header>

  <div v-if="isMobile && isMenuOpen" class="mobile-menu" ref="mobileMenu">
    <el-menu
        mode="vertical"
        :ellipsis="false"
        text-color="#3d3d3d"
        background-color="#fff"
        active-text-color="#3d3d3d"
        popper-class="nav-menu-popper"
        :default-active="activeMenu"
        router
        class="menu"
    >
      <template v-for="item in menuList">
        <el-menu-item
            v-if="!item.children.length"
            :key="item.path"
            :index="item.path"
        >{{ item.label }}</el-menu-item>
        <el-sub-menu v-else :index="item.path" :key="`${item.path}/sub`">
          <template #title>{{ item.label }}</template>
          <el-menu-item
              v-for="sub in item.children"
              :key="sub.path"
              :index="`${item.path}${sub.path}`"
          >{{ sub.label }}</el-menu-item>
        </el-sub-menu>
      </template>
    </el-menu>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue';
import { useMenu } from "@/hooks";
import Logo from "./Logo.vue";
import User from "./HeaderUser.vue";

const { menuList, activeMenu } = useMenu();

const isMobile = ref(window.innerWidth <= 768);
const isMenuOpen = ref(false);

const toggleMenu = () => {
  isMenuOpen.value = !isMenuOpen.value;
};

const handleClickOutside = (event) => {
  const mobileMenu = document.querySelector('.mobile-menu');
  const hamburgerButton = document.querySelector('.hamburger');

  if (
      (mobileMenu && !mobileMenu.contains(event.target)) &&
      (hamburgerButton && !hamburgerButton.contains(event.target))
  ) {
    isMenuOpen.value = false;
  }
};

onMounted(() => {
  window.addEventListener('resize', () => {
    isMobile.value = window.innerWidth <= 768;
    if (!isMobile.value) {
      isMenuOpen.value = false;
    }
  });

  document.addEventListener('click', handleClickOutside);
});

onUnmounted(() => {
  document.removeEventListener('click', handleClickOutside);
});
</script>

<style scoped>
.header {
  width: 100vw;
  height: 60px;
  padding-left: 20px;
  box-sizing: border-box;
  background-color: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.logo {
  width: 160px;
}

.menu-container {
  display: flex;
  flex: 1;
  justify-content: space-between;
  align-items: center;
  position: relative;
}

.menu {
  flex: 1;
}

.user-container {
  display: flex;
  align-items: center;
}

.user {
  //margin-right: 20px;
}

.hamburger {
  display: none;
  flex-direction: column;
  justify-content: space-around;
  width: 30px;
  height: 21px;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
  box-sizing: border-box;
}

.hamburger .line {
  width: 30px;
  height: 3px;
  background: #3d3d3d;
  border-radius: 10px;
}

.mobile-menu {
  position: fixed;
  top: 60px;
  left: 0;
  width: 100%;
  height: 350px;
  overflow-y: auto;
  background-color: #fff;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  z-index: 998;
  border-top: 1px solid #ddd;
}

@media (min-width: 768px) {
  .logo {
    margin-right: 20px; /* Add right margin on desktop */
  }
}

@media (max-width: 1200px) {
  .header {
    padding-left: 20px;
  }
}

@media (max-width: 768px) {
  .header {
    padding-left: 10px;
    padding-right: 10px;
  }
  .logo {
    width: 80px;
  }
  .menu {
    display: none;
  }
  .menu.menu-open {
    display: flex;
    flex-direction: column;
  }
  .user-container {
    margin-left: 0;
  }
  .hamburger {
    display: flex;
  }
}
</style>
